<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>视频播放</title>
<style>
body,div,ul,ol,dt,dd,dl,li,h1,h2,h3,h4,h5,h6,form,input,select,textarea,p,img,a,span,strong,*{ padding:0; margin:0;}
body{ font-size:12px; font-family:"宋体"; color:#000000; background-color:#FFFFFF;}
ul,ol,li{ list-style:none;}
h1,h2,h3,h4,h5,h6{ font-size:14px;}
img,input,select,textarea{ vertical-align:middle}
img{ border:none;}
a{ color:#333333; text-decoration:none;}
a:hover{ color:#003366;}
.clear{ clear:both; height:0; width:0; overflow:hidden;}
body,html{
    overflow: hidden;
    background: #ddd;
}
#box{
    width: 500px;
    height: 500px;
    border:5px dashed sienna;
    margin: 50px auto;
    /* text-align: center; */
}
video{
    width: 500px;
    height: 300px;
}
#bos{
    width: 100%;
    height: 20px;
    background:silver;
}
#sp{
    display:inline-block;
    width: 0%;
    height: 100%;
    background:orange;
}
#btns{
    width: 100%;
    height: 50px;
    text-align: center;
    line-height: 50px;
}
#btn1,#btn2,#btn3{
    width: 82px;
    height: 30px;
}
#times{
    width: 100%;
    height: 30px;
    /* background: red; */
    line-height: 30px;
    font-size: 21px;
}
#tim2{
    color: red;
}
</style>    
</head>
<body>
<div id="box">
   <video id="myVideo" src="./img/萧全 - 社会摇.mkv" ></video>
    <div id="btns">
        <input type="button" id="btn1" value="播放">
        <input type="button" id="btn3" value="静音">
        <input type="button" id="btn2" value=全屏>
    </div>
    <div id="times">
        <span id="tim1">00/00</span>
        <span>/</span>
        <span id="tim2">00/00</span>
    </div>
    <div id="bos">
        <span id="sp"></span>
    </div> 
</div>
<script>
window.onload = function(){    
//暂停播放    
    btn1.onclick = function(){
        if(myVideo.paused){
            myVideo.play();
            btn1.value = "暂停";
        }else{
            myVideo.pause();
            btn1.value = "播放";
        }
    }
//当前视屏的总时长
    var tim1 = document.querySelector('#tim1');
    var tim2 = document.querySelector('#tim2');
    // tim2.innerHTML = myVideo.duration;
    tim2.innerHTML = timeFormat(myVideo.duration);
    // myVideo.ontimeupdate = function(){
        // tim1.innerHTML = timeFormat(myVideo.duration)
        // }
//监听视频是否播放获取当前播放时间   
    myVideo.ontimeupdate = function(){
        tim1.innerHTML = timeFormat(myVideo.currentTime);
//
        var sp = document.querySelector('#sp')
        var bfb = myVideo.currentTime/myVideo.duration*100+'%';
        sp.style.width = bfb;
    }
//进度条拖动
    // var outer = document.querySelector("#bos")
    //鼠标按下事件    
    bos.onmousedown = function(e){
        var x = e.pageX - bos.getBoundingClientRect().left;
        var bosWidth = bos.offsetWidth;
        myVideo.currentTime = x / bosWidth * myVideo.duration;
        this.move = true;
    }
//鼠标拖动事件
    bos.onmousemove = function(e){
        if(this.move){
            var x = e.pageX - bos.getBoundingClientRect().left;
            var bosWidth = bos.offsetWidth;
            sp.style.width = x +"px";
            myVideo.currentTime = x / bosWidth * myVideo.duration;

        }
    }
    //鼠标弹起取消拖动事件
    bos.onmouseup = function(){
        this.move = false;
    }
//全屏
    btn2.onclick = function(){
        myVideo.webkitRequestFullScreen();
    }     
//静音
    btn3.onclick = function(){
        if(myVideo.muted){
            myVideo.muted = false;
            // btn3.value = "播放";
            console.log(myVideo.muted)
        }else{
            myVideo.muted = true;
            // btn3.value = "静音";
            console.log(myVideo.muted)
        }
    }







//将时间转换为时分秒格式
    function timeFormat(time){
        var second = parseInt(time);
        var minute = 0;
        var hour = 0;
        if(second >= 60){
            minute = parseInt(second / 60);
            second = parseInt(second % 60);
            if(minute >= 60){
                hour = parseInt(minute / 60);
                minute = parseInt(minute % 60);
            }
        }
        if(second < 10) {second = "0" + second};
        if(minute < 10) {minute = "0" + minute};
        var result = minute + ":" + second;
        if(hour > 0){result = hour + ":" + result}
        return result 
    }
}


</script>

























</body>
</html>